<template>

  <a-modal v-model:visible="LAYER.visible" :title="LAYER.title" :width="LAYER.width" :ok-text="LAYER.okText"
           :align-center="LAYER.alignCenter" :top="LAYER.top"
           :closable="LAYER.closable" :unmount-on-close="LAYER.unmountOnClose"
           :mask-closable="LAYER.maskClosable" :esc-to-close="LAYER.escToClose" :ok-loading="LAYER.okLoading"
           :on-before-ok="onSubmit" @cancel="onClose()">

    <a-form ref="formRef" :model="formState.data" :rules="DICT_ITEM_EDIT.RULES" auto-label-width layout="vertical">
      <a-row :gutter="12">
        <a-col :span="24">
          <a-form-item label="选项值" field="value">
            <a-input v-model="formState.data.value" placeholder="请填写选项值" :disabled="isUpdate"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="选项文本" field="label">
            <a-input v-model="formState.data.label" placeholder="请填写选项文本"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="颜色风格" field="theme">
            <a-select v-model="formState.data.theme" placeholder="请选择标签颜色" :allow-clear="true"
                      :options="formState.THEME_OPTIONS"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="可选状态" field="disabled">
            <smart-bool v-model="formState.data.disabled" true-text="禁止选择" false-text="允许选择"/>

          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item :label="`显示排序值 [ ${formState.data.sort} ]` " field="sort"
                       tooltip="升序排序 显示值越小 显示越靠前">
            <a-slider v-model="formState.data.sort"/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>

</template>
<script lang="ts" setup>

import {reactive, ref} from "vue";
import {LocalModal} from "@/libs/core";
import {DICT_ITEM_EDIT} from '../resource/form'

const props = defineProps({
  record: {type: Object, required: true}
})
const emit = defineEmits(['close'])
const formRef = ref(null)
const isUpdate = props.record?.value !== undefined

const formState = reactive({
  data: {...DICT_ITEM_EDIT.BODY},
  THEME_OPTIONS: [
    {label: '文字风格', value: 'text'},
    {label: '默认风格', value: 'default'},
    {label: '红色风格', value: 'red'},
    {label: '黄色风格', value: 'yellow'},
    {label: '蓝色风格', value: 'blue'},
    {label: '绿色风格', value: 'green'},
    {label: '青色风格', value: 'cyan'},
    {label: '橙色风格', value: 'orange'},
    {label: '紫色风格', value: 'purple'},
    {label: '粉红风格', value: 'pink'},

  ]
})

// @ts-ignore:
if (isUpdate) formState.data = {...props.record}

const title = isUpdate ? '修改字典项' : '新增字典项'
const service = new LocalModal(emit).setMD(title, '保存设置', 550)
const {LAYER, lockMd, unLockMd} = service

const onClose = (data = {}) => {
  LAYER.visible = false
  emit('close', data)
}


const onSubmit = async () => {
  lockMd()
  const err = await formRef.value.validate();
  if (err !== undefined) return false
  lockMd()
  onClose(formState.data)
  unLockMd()
}


</script>

